<template>
  <div :class="['modul-about-activity', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="modul-about-activity-title" v-if="!$ua.isFromPc()">
      相关文章
    </div>
    <div v-if="essay.length > 0" class="essay-box">
      <div class="content" v-for="(item, index) in essay" :key="item.data_id" @click="goDesc(item.data_id)">
        <div class="title">
          {{ item.title }}
        </div>
        <div class="img-list" v-if="Array.isArray(item.show_url_list)">
          <el-image fit="cover" v-for="(item, index) in item?.show_url_list?.slice(0, 4)" :key="index" :src="item" alt="" />
        </div>
        <div class="foot">
          <span class="name">{{ item.author }}</span>
          <span class="read-count">{{ item.read_count + '人阅读' }}</span>
          <span class="time">{{ item.create_time }}</span>
        </div>
        <div class="line" v-if="!$ua.isFromPc()" />
      </div>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
    <!-- <Pagin
      ref="page"
      v-show="essay.length !== 0"
      :func="getDataList"
      :pagesSizes="[10, 20, 30, 50]"
      :sizeNum="10"
      :layout="'prev, pager, next'"
      background
      :position="'center'"
      class="pagin"
    ></Pagin> -->
  </div>
</template>

<script>
import {getImgUrl} from '@/utils/downloadFile'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      essay: [],
      essay: []
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    // this.refresh()
    this.getEssay()
  },
  methods: {
    getImgUrl,
    // getActivityDesc() {
    //   const params = {
    //     data_id: this.$route.query.data_id,
    //     op: 'essay_list'
    //   }
    //   this.$api.getActivityDesc(params).then(res => {
    //     if (res.status == '$SUCCESS') {
    //       console.log('res.result.item_list', res.result)
    //       this.essay = res.result.item_list
    //     }
    //   })
    // },
    // 获取文章列表
    getEssay() {
      this.$api.getAboutEssay({ special_id: this.$route.query.data_id }).then(res => {
        if (res.status == '$SUCCESS') {
          console.log('ress', res)
          this.essay = Array.isArray(res.result.item_list) ? res.result.item_list : []
        }
      })
    },
    goDesc(data_id) {
      console.log('进入详情页')
      this.$router.push({ path: '/dynamic/articleDesc', query: { data_id, type: 'special' }})
    }
  }
}
</script>

<style scoped lang="less">
.modul-about-activity {
  &.z-web {
    .content {
      text-align: left;
      cursor: pointer;

      .title {
        font-size: 32px;
        font-weight: 600;
        color: #000000;
        line-height: 37px;
        margin-bottom: 15px;
      }

      .img-list {
        ::v-deep(.el-image) {
          width: 320px;
          height: 240px;
          margin-right: 20px;

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .foot {
        font-size: 16px;
        font-family: Source Han Serif SC;
        font-weight: 600;
        color: #333333;
        line-height: 37px;
        opacity: 0.75;

        span {
          display: inline-block;
          margin-right: 10px;
          margin-top: 16px;
        }
      }
    }
  }

  &.z-phone {
    padding-bottom: pxtorem(60);
    .modul-about-activity-title {
      font-size: pxtorem(36);
      font-weight: bold;
      text-align: center;
      color: #000000;
      margin: pxtorem(40) 0;
    }

    .essay-box {
      padding: 0 pxtorem(24);
      .content {
        text-align: left;
        .title {
          font-size: pxtorem(32);
          font-weight: 600;
          color: #000;
          margin-bottom: pxtorem(16);
        }
        .img-list {
          ::v-deep(.el-image) {
            width: pxtorem(220);
            height: pxtorem(165);
            margin-right: pxtorem(21);
            margin-bottom: pxtorem(15);

            &:last-child {
              margin-right: 0;
            }
          }
        }

        .foot {
          font-size: pxtorem(22);
          font-weight: 600;
          color: #333;
          opacity: 0.75;
        }

        .line {
          width: 100%;
          height: pxtorem(1);
          margin: pxtorem(32) 0;
          background-color: #E8E8E8;
        }

        &:last-child {
          .line {
            display: none;
          }
        }
      }
    }
  }
}
</style>
